National Institute of Biomedical Imaging and Bioengineering — Redesign

Summary

This project's purpose is primarily to familiarize myself with the U.S. Web Design System.

Key Challenge

NIBIB's webpage is about 3-4 years old. Although they have implemented some elements from the USWDS, there are a few areas of improvement and better integration options.

Role

Product Designer

• Interaction
• Visual Design
• Prototyping

Target

Scientist/Research facilities

Research

My research consisted of diving into the USWDS’s website. I wanted to understand their goals, process, and designs. Learning how the design system operated together was interesting, but also looking at where I can adjust the webpage to make it more personal to NIBIB.

Competitive Audit

I have looked at a few other websites already implementing the USWDS. It was actually where I started this project, because I was choosing which website I wanted to redesign. I saw how some websites used the system, and where they broke away in some areas to fit the needs of their organization.

The best way to get ideas out for the redesign was still wireframes. It allowed me to draw out how I felt the layout should be and mix and match ideas later in the process. I even referred to my drawings when creating the digital wireframes.

Accessibility

One of USWDS’s goal is to be more accessible. Therefore it has specific rules you have to follow. One of the pages I wanted to make was a page with a form, so I created a contact page where the user could fill out a form to contact NIBIB. I also kept other forms of contact, such as email, phone number, address, and links that provide detailed directions.

Take Away

My takeaway is that a design system can be very helpful and can keep you organized. With a big organization such as NIH and all of it’s branches such as NIBIB, it is easy for the websites to look messy and unkempt. With the design system starting to take place, you can see all of the websites become more cohesive with a slight flair of their own.

I did not completely change everything, so it was not entirely a from-scratch project. I kept in mind that this layout and order was in place for a reason and chose to keep elements as close to their original location as possible. A lot of the things I have applied to NIBIB was a combination of the USWDS and from learning the standards of web design at NIEHS.

Next Steps

The next step is to send NIBIB an email and show them areas they can improve and areas they have done well. Another next step I would like to take is to create a Web Design System of my own. I would also like to test the use of the website and how people use it so that I could be better prepared to update the designs.